<template>
	<view class="u-skeleton">
		<view v-if="order.truck_type > 0">
			<!-- 收货地址 -->
			<view class="u-p-b-20"></view>
			<view class="u-skeleton-rect">
				<u-cell-group>
					<u-cell-item v-if="addr" @click="openAddressPage(code)" :center="true">
						<view class="u-flex u-row-between u-p-r-30 u-content-color u-font-lg">
							<text class="m-font-bold">{{ address.name }}</text>
							<text>{{ address.phone }}</text>
						</view>
						<view class="u-m-t-15 u-text-left u-content-color u-font-sm">
							<text>{{ address.province }}</text>
							<text>{{ address.city }}</text>
							<text>{{ address.area }}</text>
							<text>{{ address.address }}</text>
						</view>
					</u-cell-item>
					<u-cell-item v-else icon="map" title="请选择收货地址" @click="openAddressPage(code)" :center="true"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<view v-else>
			<view class="u-p-b-20"></view>
			<u-cell-group>
				<u-cell-item :arrow="false">
					<view class="u-flex u-row-between u-content-color u-font-lg"><text>订单商品为虚拟商品，不需要发货</text></view>
				</u-cell-item>
			</u-cell-group>
		</view>

		<!-- 商品信息 -->
		<view class="u-m-t-20 u-p-30 m-bg-main order-goods u-skeleton-rect">
			<view class="item" v-for="(item, index) in order.items" :key="index">
				<view class="left"><image :src="item.goods_cover" mode="aspectFill"></image></view>
				<view class="content">
					<view class="title u-line-1">{{ item.goods_name }}</view>
					<view class="type u-line-1">{{ item.goods_spec }}</view>
				</view>
				<view class="right u-flex-1">
					<view class="price">
						<text class="u-font-xs">￥</text>
						<text class="u-font-lg m-font-bold">{{ item.price_selling.split('.')[0] || 0 }}.</text>
						<text class="u-font-xs">{{ item.price_selling.split('.')[1] || '00' }}</text>
					</view>
					<view class="number">x {{ item.stock_sales }}</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="u-m-t-20 u-skeleton-rect">
			<u-cell-group>
				<u-cell-item title="配送方式" icon="car" value="快递配送" :arrow="false"></u-cell-item>

				<u-cell-item title="商品金额" icon="shopping-cart" :arrow="false">
					<text class="u-font-xs">￥</text>
					<text>{{ order.amount_goods }}</text>
				</u-cell-item>

				<u-cell-item title="配送费用" icon="rmb-circle" :arrow="false">
					<text v-if="order.amount_express > 0">￥{{ order.amount_express }}</text>
					<text v-else>免运费</text>
				</u-cell-item>

				<u-cell-item title="随机立减" icon="gift" :arrow="false" v-if="order.amount_reduct > 0">
					<text class="u-font-xs">￥</text>
					<text class="u-font-xs u-type-primary">{{ order.amount_reduct.split('.')[0] || 0 }}.</text>
					<text class="u-font-xs u-type-primary">{{ order.amount_reduct.split('.')[1] || '00' }}</text>
				</u-cell-item>

				<u-cell-item title="支付金额" icon="fingerprint" :arrow="false">
					<text class="u-font-xs">￥</text>
					<text class="u-font-lg m-font-bold u-type-error">{{ order.amount_real.split('.')[0] || 0 }}.</text>
					<text class="u-font-xs u-type-error">{{ order.amount_real.split('.')[1] || '00' }}</text>
				</u-cell-item>
			</u-cell-group>
			<view class="u-p-40"></view>
		</view>

		<u-skeleton :loading="loading" :animation="true" elColor="#FFF" bgColor="#EEE"></u-skeleton>

		<m-select-payment v-model="showPayment" :order="order" :balance="balance"></m-select-payment>

		<view v-if="!loading" class="m-layout-bottom">
			<u-button type="error" style="width:60%;" class="m-inline-block" shape="circle" @click="showPayment = true">确认支付</u-button>
		</view>

		<m-login ref="login"></m-login>
	</view>
</template>

<script>
export default {
	data() {
		return {
			addr: '',
			code: '',
			order: {
				items: [
					{
						price_selling: '0.00'
					}
				],
				amount_real: '0.00',
				amount_reduct: '0.01'
			},
			address: {},
			loading: true,
			balance: 0.0,
			showPayment: false
		};
	},
	onLoad(opt) {
		this.addr = opt.addr || '';
		this.code = opt.order || '';
		this.order.order_no = this.code;
	},
	mounted() {
		this.load();
	},
	methods: {
		// 初始化加载
		load() {
			this.$refs.login.local().then(ret => {
				this.balance = Number(ret.balance_total) - Number(ret.balance_used);
				console.log('ret', ret);
				if (this.addr) {
					this.doSetAddr();
				} else if (this.code) {
					this.loadOrder();
				} else {
					console.error('访问参数错误');
				}
			});
		},
		// 跳转到收货地址
		openAddressPage(order) {
			this.$u.page('pages/address/index', { order: order });
		},
		// 加载订单数据
		loadOrder() {
			this.$u.post('data/api.auth.order/get', { order_no: this.code }).then(ret => {
				if (ret.code < 1 || ret.data.list.length < 1) {
					this.$u.message.alert('订单不存在').then(() => {
						this.$u.page.tab('pages/goods/index');
					});
				} else {
					this.order = ret.data.list[0] || {};
					if (this.order && this.order.truck && this.order.truck['address_code']) {
						this.addr = this.order.truck.address_code;
					}
					if (this.order.status < 1 || this.order.status > 2) {
						this.$u.page.rec('pages/order/show', { code: this.code });
					} else {
						this.order.truck_type > 0 ? this.loadAddr() : setTimeout(() => (this.loading = false), 300);
					}
				}
			});
		},
		// 加载收货地址
		loadAddr() {
			this.$u.post('data/api.auth.address/get', { code: this.addr || '' }).then(ret => {
				(this.address = ret.data.list[0] || {}), (this.addr = this.address.code || '');
				if (!this.order || !this.order.truck || !this.order.truck['address_code']) {
					this.doSetAddr();
				}
				setTimeout(() => (this.loading = false), 300);
			});
		},
		// 设置收货地址
		doSetAddr() {
			if (this.addr) {
				let data = {
					code: this.addr,
					order_no: this.code
				};
				this.$u.post('data/api.auth.order/perfect', data).then(() => {
					this.loadOrder();
				});
			}
		}
	}
};
</script>

<style lang="scss">
.m-layout-bottom {
	width: 100%;
	bottom: 40rpx;
	position: fixed;
	text-align: center;
}
</style>
